<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div class="block" style="  margin-top: 12px;">
        <div class="formitem">
          <label class="label">收货人:</label>
          <input
            placeholder="请输入收货人姓名"
            bindchange="onReceiverName"
            v-model="receiverName"
            placeholder-class="placeholder"
            @focusout="inputBlur"
            @focusin="inputFocus"
          />
        </div>
      </div>

      <div class="block">
        <div class="formitem">
          <label class="label">联系电话:</label>
          <input
            placeholder="请输入联系电话"
            bindchange="onReceiverPhone"
            type="number"
            maxlength="11"
            v-model="receiverPhone"
            placeholder-class="placeholder"
            @focusout="inputBlur"
            @focusin="inputFocus"
          />
        </div>
      </div>

      <div class="block">
        <div class="formitem">
          <label class="label">地区:</label>
          <areaSelect style="flex:1" @change="onAreaSelectChange" :areaHistory="addressAreas.areaList">
            <div v-if="addressAreas.areaCode" class="picker">
              <span>{{addressAreas.areaName}}</span>
            </div>
            <div v-else>请选择地址</div>
          </areaSelect>
        </div>
      </div>

      <div class="block" style="  margin-top: 12px;">
        <div class="formitem">
          <label class="label">详细地址:</label>
          <input
            placeholder="请输入详细地址"
            bindchange="onAddress"
            v-model="addressDetail"
            placeholder-class="placeholder"
            @focusout="inputBlur"
            @focusin="inputFocus"
          />
        </div>
      </div>
      <div class="block sumit">
        <button type="warn" @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
  import Me from '@/dll/me'

  export default {
    name: 'addressEdit',
    data () {
      // 初始化为用户浏览地址
      let addressAreas = {
        areaCode: '',
        areaName: '',
        areaList: []
      }
      if (localStorage.localSelectArea) {
        addressAreas = JSON.parse(localStorage.localSelectArea)
      }
      return {
        xheader: {
          title: '添加地址'
        },
        addressAreas: addressAreas,
        edit: false,
        addressId: '',
        receiverName: '',
        receiverPhone: '',
        addressDetail: ''
      }
    },

    watch: {
      receiverPhone (phone_new, phone_old) {
        if (phone_new.length > 11) {
          this.receiverPhone = phone_old
        }
      }
    },
    created () {
      let address = this.$route.params.address
      if (address) {
        this.receive_name = address.receive_name
        this.receive_phone = address.receive_phone
        this.address_id = address.address_id
        this.address = address.address
        this.is_default = address.is_default * 1
        this.edit = true
        let addressAreas = []
        let alias = address.alias.split('_')
        alias.map((item, index) => {
          if (item) {
            addressAreas.push({
              id: item
            })
          }
        })
        this.xheader.title = '修改地址'
        this.addressAreas = addressAreas
        this.$forceUpdate()
      }
    },
    methods: {
      onAreaSelectChange (selectAddress) {
        this.addressAreas = selectAddress
      },
      async submit () {
        let addressAreas = this.addressAreas
        let province = {}
        let city = {}
        let county = {}
        let town = {}
        addressAreas.areaList.map((area, index) => {
          if (index == 0) {
            province = area
          } else if (index == 1) {
            city = area
          } else if (index == 2) {
            county = area
          } else if (index == 3 && area) {
            town = area
          }
        })

        let param = {
          address_province_id: province.area_id,
          address_province_name: province.area_name,
          address_city_id: city.area_id,
          address_city_name: city.area_name,
          address_county_id: county.area_id,
          address_county_name: county.area_name,
          address_town_id: town.area_id ? town.area_id : 0,
          address_town_name: town.area_name ? town.area_name : '',
          receiver_name: this.receiverName,
          receiver_phone: this.receiverPhone,
          address_detail: this.addressDetail
        }

        if (this.edit) {
          param.address_id = this.address_id
          param.is_default = this.is_default ? 1 : 0
          let res = await Me.editMeAddress(param)
          if (res.code == 0) {
            this.$vux.alert.show({
              title: '提示',
              content: '地址已修改',
              onHide: () => {
                this.$router.back()
              }
            })
          } else {
            this.$vux.alert.show({
              title: '提示',
              content: res.msg
            })
          }
        } else {
          let res = await Me.addAddress(param)
          if (res.code == 0) {
            this.$vux.alert.show({
              title: '提示',
              content: '添加成功',
              onHide: () => {
                this.$router.back()
              }
            })
          } else {
            this.$vux.alert.show({
              title: '提示',
              content: res.msg
            })
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .page {
    padding-bottom: 78px;
  }

  .sumit {
    padding-bottom: 32px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .sumit button {
    font-size: 16px;
  }

  .formitem {
    background-color: #fff;
    display: flex;
    padding: 14px 24px;
    box-sizing: border-box;
    align-items: center;
  }

  .formitem .label {
    display: block;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
    width: 96px;
  }

  .formitem input,
  .formitem picker,
  .placeholder,
  .formitem areaSelect {
    flex: 1;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
  }

  .formitem .picker {
    position: relative;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
    min-height: 21px;
    display: block;
    box-sizing: border-box;
    padding-right: 15px;
  }

  .formitem .picker:before {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #351009;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    top: -2px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -4px;
  }

  .placeholder {
    opacity: 0.2;
  }
</style>
